import { getTakeAwayUserOrderPageList } from '@/services/takeAwayUserOrderService';
import { dateFormat } from '@/utils/common';
import { Drawer, TabsProps, Tabs, List, Avatar } from 'antd';
import React, { useEffect, useState } from 'react';

interface Props {
  isOpen: boolean,
  closeEvent: (isOpen: boolean) => void;
}

const ToDoListModal: React.FC<Props> = (props) => {
  const { isOpen, closeEvent } = props;
  const [open, setOpen] = useState(isOpen);
  const [newOrderList, setNewOrderList] = useState<TakeAwayUserOrderType.TakeAwayUserOrderResponse[]>([]);

  const tabItems: TabsProps['items'] = [
    {
      key: '1',
      label: '新订单',
      children: <List
        itemLayout="horizontal"
        dataSource={newOrderList}
        pagination={{
          onChange: (page) => {
            console.log(page);
          },
          pageSize: 3,
        }}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={item.UserInfo.Avatar} />}
              title={<a href="https://ant.design">{"订单号" + item.OrderNumber}</a>}
              description={`用户${item.UserInfo.UserName}在${dateFormat(item.AddTime)}下单了`}
            />
          </List.Item>
        )}
      />
    }
  ];

  const loadUserNewOrders = async (pageSize: number, current: number) => {
    const { Items } = await getTakeAwayUserOrderPageList({ current: current, pageSize: pageSize, "@relationships": "all" });
    setNewOrderList(Items[0].Records);
  }

  const onClose = () => {
    setOpen(false);
    closeEvent(false)
  };

  useEffect(() => {
    alert(isOpen)
    setOpen(isOpen);
    loadUserNewOrders(10, 1);
  }, [isOpen])

  return (<Drawer
    title={`代办列表`}
    width={
      '80%'}
    onClose={onClose}
    open={open}
    closeIcon={false}
    placement='right'
  >
    <Tabs defaultActiveKey="1" items={tabItems} />
  </Drawer>)
}

export default ToDoListModal;
